<template>
  <div
      id="teamCardList"
  >
    <van-card
        v-for="team in props.teamList"
        :desc="team.description"
        :title="`${team.name}`"
        @click="getTeamDetail(team)"
    >
      <template #thumb>
        <van-image :src=campusImage   @click="getTeamDetail(team)"/>
      </template>
      <template #tags>
        <van-tag plain type="danger" style="margin-right: 8px; margin-top: 8px">
          {{
            teamStatusEnum[team.status]
          }}
        </van-tag>
      </template>
      <template #bottom>
        <div style="margin-top: 2px" @click="getTeamDetail(team)">
          {{ '队伍人数：' + team.joinNum + "/" + team.maxNum }}
        </div>
        <div style="margin-top: 2px">
          <span class="sp_font">过期时间</span>
          {{ ": " + (team.expireTime !== null ? moment(team.expireTime).format('YYYY-MM-DD HH:mm:ss') : "永不过期") }}
        </div>
        <div style="margin-top: 2px">
          <span class="sp_font">创建时间</span>
          {{ ": " + moment(team.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </div>
      </template>
    </van-card>
  </div>

</template>

<script setup lang="ts">
import {TeamType} from "../models/team";
import {teamStatusEnum} from "../constants/team";
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user";
import {useRouter} from "vue-router";
import campusImage from "../assets/team.png"
import moment from "moment";

interface TeamCardListProps {
  teamList: TeamType[];
}

const props = withDefaults(defineProps<TeamCardListProps>(), {
  // @ts-ignore
  teamList: [] as TeamType[],
});


const currentUser = ref();
const router = useRouter();



onMounted(async () => {
  currentUser.value = await getCurrentUser();
})

const getTeamDetail = (team) => {
  router.push({
    path: "/team/info",
    query: {
      teamId: team.teamId,
      userId: team.userId,
      name: team.name,
      description: team.description,
      expireTime: team.expireTime,
      maxNum: team.maxNum,
      status: team.status,
      createTime: team.createTime,
      createUserName: team.createUser?.username,
      joinNum: team.joinNum,
    }
  })
}
/*const getTeamDetail = (team) => {
  router.push({
    path: "/team/info",
    query: {
      teamId: team.teamId,
      userId: team.userId,
      name: team.name,
      description: team.description,
      expireTime: team.expireTime,
      maxNum: team.maxNum,
      status: team.status,
      createTime: team.createTime,
      createUserName: team.createUser?.username,
      joinNum: team.joinNum,
      hasJoin:Boolean(team.hasJoin),
    }
  })
}*/
</script>

<style scoped>
#teamCardList :deep(.van-image__img) {
  height: 128px;
  object-fit: unset;
}
</style>
